import 'package:ez_ic_led/bluetooth/send_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_kit_audio/flutter_kit_audio.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../commont/custom_pickerview.dart';
import '../tool/assets.dart';

class CustomFooter extends StatefulWidget {
  const CustomFooter({super.key});

  @override
  State<CustomFooter> createState() => _CustomFooterState();
}

class _CustomFooterState extends State<CustomFooter> {
  bool show = true;
  List<String> list = ['RGB', 'RBG', 'GRB', 'GBR', 'BRG', 'BGR', 'RGBW', 'RBGW', 'GRBW', 'GBRW', 'BRGW', 'BGRW'];
  final TextEditingController _controller = TextEditingController(); // 控制器

  @override
  void initState() {
    super.initState();
    _controller.text = ledNum;
    // 监听输入框内容的变化
    _controller.addListener(() {
      setState(() {
        ledNum = _controller.text; // 更新输入值
      });
    });
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放控制器
    super.dispose();
  }

  ///
  Widget text(String text, double font) {
    return Center(
      child: Text(text, style: TextStyle(fontSize: font, color: Colors.white)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ///title
        InkWell(
          onTap: () {
            // setState(() {
            //   show = !show;
            // });
          },
          child: Container(
            height: 50,
            decoration: const BoxDecoration(
              gradient: localGradient,
            ),
            child: text('RGB Sorting', 20),
          ),
        ),

        ///listview
        Container(
          padding: EdgeInsets.only(top: show ? 10 : 0, left: 20, right: 20),
          child: show == false
              ? Container()
              : SizedBox(
                  height: 132,
                  child: Column(
                    children: [
                      ///RGB列表
                      Expanded(
                        child: CustomPickerview(
                            selectIndexs: [rgbIndex < list.length ? rgbIndex - 1 : 0],
                            items: [list],
                            onChanged: (p0, p1) {
                              setState(() => rgbIndex = p1 + 1);
                              SendData.send('RGB排序', [(ledNum.intValue ~/ 3.0).toInt(), rgbIndex]);
                              FlutterKitAudio.customSound(soundType: FlutterKitAudioCustomSoundType.click18);
                              saveString(rgbIndexKey, '$rgbIndex');
                            }),
                      ),

                      Container(
                        padding: const EdgeInsets.only(top: 10, bottom: 10),
                        height: 60,
                        child: Row(
                          children: [
                            Flexible(
                              flex: 3,
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(4),
                                  gradient: localGradient,
                                ),
                                child: InkWell(
                                  borderRadius: BorderRadius.circular(4),
                                  onTap: () {
                                    // rgbIndex = showIndex;
                                    // SendData.send('RGB排序', valueList[rgbIndex]);
                                    // print('=============> 输入结果是 = ${ledNum}, ${_controller.text}');
                                  },
                                  child: text('LED Quantity', 16),
                                ),
                              ),
                            ),
                            const SizedBox(width: 20),

                            ///
                            Flexible(
                                flex: 4,
                                child: Container(
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(4),
                                      border: Border.all(color: Colors.white, width: 0.5)),
                                  // child: text(list.length > rgbIndex ? list[rgbIndex] : '', 16),
                                  ///输入框
                                  child: TextField(
                                    controller: _controller, // 设置控制器
                                    textAlign: TextAlign.center,
                                    textAlignVertical: TextAlignVertical.top,
                                    keyboardType: TextInputType.number, // 设置数字键盘
                                    inputFormatters: <TextInputFormatter>[
                                      FilteringTextInputFormatter.digitsOnly, // 只允许输入数字
                                    ],
                                    decoration: const InputDecoration(
                                      hintText: '', // 提示文本
                                      border: InputBorder.none, // 去掉边框
                                      filled: true,
                                      fillColor: Colors.transparent, // 可以给输入框填充背景颜色
                                      contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 0),
                                    ),
                                    // 或者使用 onSubmitted，这在回车时会立即传递值
                                    onSubmitted: (value) {
                                      SendData.send('RGB排序', [(ledNum.intValue ~/ 3.0).toInt(), rgbIndex]);
                                      saveString(ledNumKey, ledNum);
                                    },
                                    onChanged: (value) {
                                      if (ledNum.isNumber) {
                                        SendData.send('RGB排序', [(ledNum.intValue ~/ 3.0).toInt(), rgbIndex]);
                                        saveString(ledNumKey, ledNum);
                                      }
                                    },
                                  ),
                                ))
                          ],
                        ),
                      ),
                    ],
                  )),
        ),
      ],
    );
  }
}

extension _CustomFooterStateextension on _CustomFooterState {
  // 保存字符串
  Future<void> saveString(String key, String value) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(key, value);
  }

  // 获取字符串
  Future<String?> getString(String key) async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString(key);
  }
}
